import { Layer, Shape, Stage } from 'react-konva'

export default function View() {
  const offset = 5000
  const coordinates = [
    [
      [-offset, -offset],
      [offset, -offset],
      [offset, offset],
      [-offset, offset],
      [-offset, -offset]
    ],
    [
      [872, 322],
      [872, 646],
      [1435, 646],
      [1435, 322],
      [872, 322]
    ]
  ]

  return (
    <div className='view-wrapper'>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Shape
            opacity={0.7}
            fill='#191e26'
            stroke='black'
            strokeWidth={2}
            dash={[5, 5]}
            sceneFunc={(context, shape) => {
              context.beginPath()

              coordinates.forEach(arr => {
                arr.forEach((item, itemIndex) => {
                  const [x, y] = item
                  if (itemIndex === 0) {
                    context.moveTo(x, y)
                  } else {
                    context.lineTo(x, y)
                  }
                })
              })

              context.closePath()
              context.clip()
              context.fillStrokeShape(shape)
            }}
          />
        </Layer>
      </Stage>
    </div>
  )
}
